<template>
  <span>
    <a v-if="chatMessageType == 'image'" :href="chatMessage" target="_blank">
      <img :src="chatMessage" class="chat-image-preview" />
    </a>
    <a
      v-else-if="chatMessageType == 'file'"
      :href="chatMessage"
      target="_blank"
      class="chat-file-preview"
    >
      <file-outlined />
      {{ fileName }}
      <download-outlined />
    </a>
    <a
      v-else-if="chatMessageType == 'link'"
      :href="chatMessage"
      target="_blank"
      class="chat-link-message"
    >
      <link-outlined />
      {{ chatMessage }}
    </a>
    <span v-else>{{ chatMessage }} </span>
  </span>
</template>

<script lang="ts">
  import { LinkOutlined, FileOutlined, DownloadOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  import { AppConsts } from '/@/abpPro/AppConsts';
  import { AppComponentBase, ChatMessageDto } from '/@/shared';

  export default defineComponent({
    name: 'g-chat-message',
    components: { LinkOutlined, FileOutlined, DownloadOutlined },
    mixins: [AppComponentBase],
    props: {
      message: {
        type: ChatMessageDto,
        default() {
          return {};
        },
      },
    },
    data() {
      return {
        chatMessageType: '',
        chatMessage: '',
        fileName: '',
        filepath: AppConsts.remoteServiceBaseUrl + '/File/GetFile?filePath=',
      };
    },
    created() {
      this.setChatMessageType();
    },
    methods: {
      setChatMessageType() {
        const self = this as any;
        if (self.message.message.startsWith('[image]')) {
          self.chatMessageType = 'image';
          let fileUrl = self.message.message.split('fileUrl=')[1];
          self.chatMessage = this.filepath + fileUrl;
        } else if (self.message.message.startsWith('[file]')) {
          self.chatMessageType = 'file';
          const messageStr = self.message.message;
          let stop = messageStr.indexOf('fileName');
          let fileUrl = messageStr.substring('[file]fileUrl='.length, stop);
          self.chatMessage = this.filepath + fileUrl + '&download=true';
          self.fileName = messageStr.split('fileName=')[1];
        } else if (self.message.message.startsWith('[link]')) {
          self.chatMessageType = 'link';
          let linkMessage = JSON.parse(self.message.message.substring('[link]'.length));
          self.chatMessage = linkMessage.message == null ? '' : linkMessage.message;
        } else {
          self.chatMessageType = 'text';
          self.chatMessage = self.message.message;
        }
      },
    },
  });
</script>

<style lang="less">
  .chat-image-preview {
    width: 235px;
    margin-top: 5px;
  }
  .chat-link-message {
    display: block;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
    margin-top: 15px;
    text-align: left;
    padding: 5px;
    background-color: #3598dc;
    color: #f7f7f7;
  }
  .chat-file-preview {
    margin-top: 15px;
    text-align: left;
    padding: 5px;
    background-color: #625dbb;
    display: block;
    color: #d9d9d9;

    i.la-file {
      margin-right: 2px;
    }

    i.la-download {
      margin-top: 2px;
    }

    &:hover {
      color: #fff;

      i {
        text-decoration: none;
      }
    }
  }
</style>
